Preflight request

Preflight request (プリフライトリクエスト) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

CORS のプリフライトリクエストは CORS のリクエストの一つであり、サーバーが CORS プロトコルを理解していて準備がされていることを、特定のメソッドとヘッダーを使用してチェックします。

これは OPTIONS リクエストであり、 Access-Control-Request-Method,Access-Control-Request-Headers, Origin の3つの HTTP リクエストヘッダー使用します。

プリフライトリクエストはブラウザーが自動的に発行するものであり、通常は、フロントエンドの開発者が自分でそのようなリクエストを作成する必要はありません。

CORSの仕様では、次の条件に一つでも当てはまる場合は、実際のHTTPリクエスト(GETやPOST)を行う前に、preflight requestとしてOPTIONSリクエストを行うことが定められています。この場合、サーバ側ではGETやPOSTに加えてOPTIONSでも同様のCORS対応が必要になりますので、注意が必要です。

HTTPリクエストのメソッドがGET, POST, HEAD以外である。

HTTPリクエストヘッダにAccept, Accept-Language, Content-Language以外のフィールドが含まれている、あるいは、Content-Typeフィールドにapplication/x-www-form-urlencoded, multipart/form-data, text/plain以外の内容が指定されている。

上の条件を一つでも満たす場合は、CORS違反していないかの事前チェックとしてOPTIONSリクエストが投げられる

その結果、サーバーからCORSで許されてないので駄目ですよと帰ってきたらエラーになる

preflight requestには、サーバ側からブラウザにキャッシュさせる有効期限を指定することが出来ます。この期限内であれば、最初のpreflight requestがこの後の同じURLに対するHTTPリクエストにも適用されるようになります。

キャッシュされていることもあるので、挙動チェックしたい時に注意

https://gyazo.com/f90193cd974f6295f9d1b606bab61a4a

画像は、https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#preflighted_requests より引用

CORS: OPTIONSリクエスト（preflight request）を避ける - Qiita

避けたい場合は仕様を把握して、preflight request が投げられない条件だけを満たすようにする